<template>
	<view  class="app-container">
		<view class="cu-bar bg-white solid-bottom  text-xl">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text>
				<DictTag :options="choiceCategoryOptions" :value="question.choiceCategory" />
			</view>
			<view class="action ">
				<button class="cu-btn cuIcon margin-right-xl lg" @click="questionFavorite()"
				:class="favoriteStatus ? 'bg-green' : 'bg-gray'">
					<text class="cuIcon-favor"></text>
				</button>
				<button class="cu-btn cuIcon bg-blue lg" @click="openNoteModel()">
					<text class="cuIcon-edit"></text>
				</button>
			</view>
		</view>
		
		<view class="bg-white padding-sm" v-if="question.choiceCategory == 12 || question.choiceCategory == 21">
			<view class="text-xl ">
				<text  class="text-bold">{{pageNum}}、题干：</text>{{question.stem}}
			</view>
		</view>
		<view class="bg-white padding-sm" v-if="question.choiceCategory == 12 || question.choiceCategory == 21">
			<view class="text-xl ">
				<text  class="text-bold">{{pageNum}}、题干：</text>{{question.stem}}
			</view>
		</view>
		<!-- 题目内容 -->
		<view class=" bg-white" v-for="(issue, index) in issues" :key="index">
			<view class="padding-sm">
				<view  v-if="question.choiceCategory == 12 || question.choiceCategory == 21">
					<text class="text-bold text-xl ">
						{{index + 1}}) {{issue.issue}}
					</text>
				</view>
				<view v-else>
					<text class="text-bold text-xl ">
						{{pageNum}}、{{issue.issue}}
					</text>
				</view>
				<!-- 做题选项 -->
				<view v-if="!question.answerFlag">
					<view class="padding-sm" v-for="(option, optionindex) in issue.issueOptions" :key="optionindex" 
					@click="issueOptionChange(issue, optionindex)">
						<view class="flex text-xl">
							<view class="cu-tag round text-xl " :class="option.checked ? 'bg-green' : ''">
								<DictTag :options="choiceAnswerOptions" :value="optionindex + 1" />
							</view>
							<view class="padding-left-sm flex">
								{{option.label}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 答案选项 -->
			<view v-if="question.answerFlag">
				<view class="padding-sm" v-for="(option, optionindex) in issue.issueOptions" :key="optionindex" >
					<view class="flex text-xl ">
						<view class="cu-tag round text-xl " 
						:class="option.checked ? 'optionclass' + option.status : ''">
							<DictTag :options="choiceAnswerOptions" :value="optionindex + 1" />
						</view>
						<view class="padding-left-sm flex" :class="option.checked ? 'optionclass-text' + option.status : ''">
							{{option.label}}
						</view>
					</view>
				</view>
				<view class="cu-list menu " >
					<view class="cu-item padding-lr-sm" >
						<view class="content">
							<text class="">答案：</text>
							正确答案 
							<text class="text-green padding-left-sm text-bold">{{issue.answer}}</text>,
							你的答案
							<text class=" padding-left-sm text-bold"
								:class="issue.answer == issue.myanswer ? 'text-green' : 'text-red'"
							>{{issue.myanswer}}</text>
						</view>
						<view class="action" @click="gotoFix()">
							<button class="cu-btn round sm bg-grey">题目纠错</button>
						</view>
					</view>
					
					<view class="cu-item explain margin-bottom-xl" >
						<view class="content padding-tb-sm">
							<text class="">解析：</text>
							{{issue.answerExplain? issue.answerExplain : "本题暂无解读"}}
							<button class="cu-btn round sm bg-grey margin-left-lg " v-if="!issue.answerExplain" @click="gotoResolve()">我来添加</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="padding" style="margin-bottom: 100rpx;">
			<button class="cu-btn block bg-blue margin-tb-sm lg" @click="submitAnswer()"
				v-if="!question.answerFlag"
			>提交答案</button>
		</view>
		
		<!-- 笔记弹窗 -->
		<u-popup :show="isShowNoteModel" mode="right" @close="closeNoteModel" :closeable="true" >
			<view class="padding margin-top"  style="width: 600rpx;">
				<view class="margin-top">
					<u--textarea v-model="curNote.content" placeholder="留下努力的痕迹,卷王之王~" count ></u--textarea>
					<view class="padding flex flex-direction" >
						<button class="cu-btn bg-blue lg text-bold round " @click="questionNoteSave()">保存笔记</button>
					</view>
				</view>
				<view class="margin-top">
					<view class="action text-xl">
						<text class="cuIcon-titles text-blue"></text>
						笔记列表
					</view>
				</view>
				<view class="margin-top-sm" v-for="(item, index) in noteList" :key="index" @click="questionNoteEdit(item)">
					<view class="bg-gray padding ">
						<view class='cu-tag round bg-blue sm margin-right-sm' v-if="item.editStatus">我的笔记</view>{{item.content}}
						<view class="padding-top cuIcon-people text-grey ">
							<text class="padding-left-xs">{{item.createBy}}</text>
						</view>
						<view class="cuIcon-time text-grey ">
							<text class="padding-left-xs">{{item.createTime}}</text>
						</view>
					</view>
				</view>
				<view v-if="noteList.length == 0" class="padding margin-top-xl">
					<u-empty mode="list" text="暂无笔记内容, 请前往添加哦~">
					</u-empty>
				</view>
			</view>
		</u-popup>
		 
	</view>
</template>

<script>
	import {
		getDictData
	} from "@/api/api.js"
	import {
		qbmsQuestionInfo, questionAnswerCheck, qbmsQuestionList,
		qbmsQuestionFavorite, qbmsQuestionFavoriteRecord,
		qbmsQuestionNoteContent, qbmsQuestionNoteSave
	} from "@/api/qbms.js"
	export default {
		data() {
			return {
				questionId: 0,
				pageNum: 1,
				total: 0,
				
				subjectName: "", // 学科名称
				chapterName: "", // 章节名称
				questionId: 0, // 题目ID

				choiceCategoryOptions: [], // 题目类型
				choiceAnswerOptions: [], // 答案选项

				question: {}, // 题目信息
				issues: [], // 问题
				
				favoriteStatus: false, // 题目收藏状态
				
				isShowNoteModel: false, // 是否显示笔记
				curNote: { // 当前笔记
					content: "",
				},
				noteList: [], // 笔记列表
				
				startData:{
				    clientX:'',
				    clientY:''
				}
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.subjectName + " | " + options.chapterName
			})
			this.questionId = options.questionId;
			// this.pageNum = Number(options.pageNum);
			this.subjectName = options.subjectName;
			this.chapterName = options.chapterName;


		},
		onShow() {
			this.initDict();
			this.initData();
		},
		methods: {
			/** 关闭笔记弹窗 */
			closeNoteModel() {
				this.isShowNoteModel = false;
			},
			/** 打开笔记弹窗 */
			openNoteModel() {
				this.clearCurNote();
				this.isShowNoteModel = true;
			},
			/** 初始化数据 */
			initData() {
				this.getQuestionList();
			},
			/** 获取题目信息 */
			getQuestionList() {
				qbmsQuestionInfo({
					questionId: this.questionId
				}).then(res => {
					this.question = res.data;
					this.issues = res.data.issues;
					this.getQuestionFavoriteRecord();
					this.getQuestionContent();
				})
			},
			
			/** 问题选项改变 */
			issueOptionChange(issue, index) {
				// 题目类型
				let choiceCategory = this.question.choiceCategory;
				let issueOptions = issue.issueOptions;
				let checked = !issueOptions[index].checked;
				if (choiceCategory < 20) { // 单选题
					issueOptions.forEach(function(ele, i) {
						ele.checked = false
					})
					issueOptions[index].checked = checked
				} else {
					issueOptions[index].checked = checked;
				}
			},
			
			/** 提交答案 */
			submitAnswer() {
				let issuesAnswer = [];
				let flag = true;
				// 构建提交信息
				this.issues.forEach(function(issue) {
					let optionstr = "";  // 选项字符串
					issue.issueOptions.forEach(function(option, index) {
						if (option.checked) {
							optionstr += (index + 1) + ",";
						}
					})
					if (optionstr == "") {
						flag = false;
					}
					// 去除最后一个逗号
					if (optionstr.length > 1) {
						optionstr = optionstr.substring(0, optionstr.length - 1);
					}
					issuesAnswer.push({
						id: issue.id,
						answer: optionstr
					});
					
				})
				if (flag) {
					questionAnswerCheck({
						questionId: this.question.id,
						issues: issuesAnswer
					}).then(res => {
						this.question = res.data;
						this.issues = res.data.issues;
					})
					
				} else {
					uni.showToast({
						title: '请作答后提交',
						icon: "none",
					});
				}
				
			},
			
			/** 跳转下一题 */
			goNextQuestion() {
				// 判断是否到最后一题
				if (this.total > this.pageNum) {
					this.pageNum = this.pageNum + 1;
					this.getQuestionList();
				} else {
					uni.showToast({
						title: "没有下一题",
						icon: "none"
					})
				}
			},
			
			/** 跳转上一题 */
			goLastQuestion() {
				if (this.pageNum > 1) {
					this.pageNum = this.pageNum - 1;
					this.getQuestionList();
				} else {
					uni.showToast({
						title: "没有上一题",
						icon: "none"
					})
				}
			},
			
			/** 获取题目收藏记录 */
			getQuestionFavoriteRecord() {
				qbmsQuestionFavoriteRecord({
					questionId: this.question.id
				}).then(res => {
					this.favoriteStatus = res.data
				})
			},
			
			/** 收藏题目 */
			questionFavorite() {
				qbmsQuestionFavorite({
					questionId: this.question.id
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.favoriteStatus = res.data
				})
			},
			
			/** 题目笔记编辑 */
			questionNoteEdit(note) {
				if (note.editStatus) {
					this.curNote = note;
				}
			},
 			
			/** 题目笔记保存 */
			questionNoteSave() {
				this.curNote.questionId = this.question.id;
				if (this.curNote.content.length <= 5) {
					uni.showToast({
						title: "请输入笔记内容, 内容不少于5个字符",
						icon: "none"
					})
					return;
				}
				this.closeNoteModel();
				this.$util.$confirm(" 切勿上传无用、违规等内容，平台将对相关账户进行锁定封禁").then(res => {
					this.confirmSubmitNote();
				}).catch(err => {
					this.openNoteModel();
				})
				
			},
			
			/** 确认提交笔记 */
			confirmSubmitNote() {
				qbmsQuestionNoteSave(this.curNote).then(res => {
					uni.showToast({
						title: "保存成功",
						icon: "none"
					})
					this.openNoteModel();
					this.clearCurNote();
					this.getQuestionContent();
				})
			},
			clearCurNote() {
				this.curNote = {
					content: "",
				}
			},
			
			/** 获取题目笔记内容 */
			getQuestionContent() {
				qbmsQuestionNoteContent({
					questionId : this.question.id
				}).then(res => {
					this.noteList = res.data;
				})
			},
			
			/** 初始化字典 */
			initDict() {
				// 获取题库类型字典
				getDictData({
					dictType: "qbms_choice_category"
				}).then(res => {
					this.choiceCategoryOptions = res.data;
				})
				// 选择题答案选项
				getDictData({
					dictType: "qbms_choice_answer_options"
				}).then(res => {
					this.choiceAnswerOptions = res.data;
				})
			},
			
			/** 跳转题目清单 */
			gotoQuestionList() {
				uni.$u.route({
					url: "/pages/qbms/chapterQuestion",
					params: {
						chapterId: this.chapterId,
						chapterName: this.chapterName,
						subjectName: this.subjectName,
					}
				})
			},
			
			/** 跳转题目纠错界面 */
			gotoFix() {
				console.log("题目纠错");
				uni.$u.route({
					url: "/pages/qbms/questionFix",
					params: {
						questionId: this.question.id,
					}
				})
			},
			
			
			start(e){               
			    this.startData.clientX=e.changedTouches[0].clientX;             
			    this.startData.clientY=e.changedTouches[0].clientY;
			},
			 
			end(e){
			    const subX=e.changedTouches[0].clientX-this.startData.clientX;
			    const subY=e.changedTouches[0].clientY - this.startData.clientY;
			    if(subY>50 || subY<-50){
			        console.log('上下')
			    }else{
			        if(subX>100){
			           this.goLastQuestion();
			        }else if(subX<-100){
						this.goNextQuestion();
			        }else{
			            console.log('无效')
			        }
				}	
			}
		
		}
	}
</script>

<style scoped lang="scss">

.app-container {
	min-height: 95vh;
}
.optionclass1 {
	background-color: #39b54a !important;
	color: #ffffff;
}
.optionclass-text1 {
	color: #39b54a;
}
.optionclass2 {
	background-color: #39b54a !important;
	color: #ffffff;
}
.optionclass-text2 {
	color: #39b54a;
}
.optionclass3 {
	background-color: #e54d42 !important;
	color: #ffffff;
}
.optionclass-text3 {
	color: #e54d42;
}
.explain {

	background-color: #f4f4f5 !important;
}
</style>
